import { FC, useEffect } from 'react';
import { Suspense, useState } from 'react';
import { Col, Row } from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import type { RadioChangeEvent } from 'antd/es/radio';
import IntroduceRow from './components/IntroduceRow';
import TopSearch from './components/TopSearch';
import ProportionSales from './components/ProportionSales';
import OfflineData from './components/OfflineData';
import { useRequest } from 'umi';

import { analyticChartsData } from './service';
import PageLoading from './components/PageLoading';
import type { AnalysisData, TotalAnalyticChartsData } from './data.d';

type AnalysisProps = {
  dashboardAndanalysis: AnalysisData;
  loading: boolean;
};

const Analysis: FC<AnalysisProps> = () => {
  const [analyticChartsDataItem, setAnalyticChartsDataItem] = useState<TotalAnalyticChartsData>({
    click_charts: {
      lines: [],
    },
    visit_data: [],
  });
  // const { loading, data } = useRequest(fakeChartData);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    const getTaskDetailCharts = async () => {
      try {
        setLoading(true);
        const { data } = await analyticChartsData();
        // setSmsClickLineData(data.click_charts.lines);
        // setVisitLineData(data.visit_data);
        setAnalyticChartsDataItem(data);
      } finally {
        setLoading(false);
      }
    };
    getTaskDetailCharts();
  }, []);

  const handleChangeSalesType = (e: RadioChangeEvent) => {
    setSalesType(e.target.value);
  };

  const handleTabChange = (key: string) => {
    setCurrentTabKey(key);
  };

  const activeKey = '';

  return (
    <GridContent>
      <>
        <Suspense fallback={<PageLoading />}>
          <IntroduceRow loading={loading} visitData={analyticChartsDataItem} />
        </Suspense>

        {/* <Suspense fallback={null}>
          <SalesCard
            rangePickerValue={rangePickerValue}
            salesData={data?.salesData || []}
            isActive={isActive}
            handleRangePickerChange={handleRangePickerChange}
            loading={loading}
            selectDate={selectDate}
          />
        </Suspense> */}

        <Row
          gutter={24}
          style={{
            marginTop: 24,
          }}
        >
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <Suspense fallback={null}>
              <TopSearch loading={loading} visitData={analyticChartsDataItem} />
            </Suspense>
          </Col>
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <Suspense fallback={null}>
              <ProportionSales loading={loading} visitData={analyticChartsDataItem} />
            </Suspense>
          </Col>
        </Row>

        <Suspense fallback={null}>
          <OfflineData
            activeKey={activeKey}
            loading={loading}
            offlineData={analyticChartsDataItem?.offlineData || []}
            offlineChartData={analyticChartsDataItem?.offlineChartData || []}
            handleTabChange={handleTabChange}
          />
        </Suspense>
      </>
    </GridContent>
  );
};

export default Analysis;
